<template>
  <div class="index-container  border-box">
    <!-- <card-list @sendTitle="getTitle" />
    <div class="sale-card">
      <sale-title @sendCurrent="getCurrent">
        <template slot="title"> {{ currentName }} 统计图 </template>
      </sale-title>
      <a-row class="sale-container" :gutter="16">
        <a-col :xs="24" :md="24" :sm="24" :lg="16" style="height:100%">
          <line-chart
            :chartData="lineData"
            :title="currentName"
            class="chart-line"
          />
        </a-col>
        <a-col :xs="24" :md="12" :sm="12" :lg="8" style="height:100%">
          <div class="shop-title">门店{{ currentName }}排行榜 Top10</div>
          <shop-rank style="height:calc(100% - 80px)" :rankData="rankData" />
        </a-col>
      </a-row>
    </div>
    <a-row :gutter="24" class="sale-list ">
      <a-col :xs="24" :md="12" :sm="12" :lg="8">
        <a-card title="消费种类占比" :hoverable="true" :bordered="false">
          <pie-chart :chartData="pieData" class="chart-line" />
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12" :sm="12" :lg="8">
        <a-card title="热门搜索" :hoverable="true" :bordered="false">
          <hot-chart :chartData="hotData" class="chart-line" />
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12" :sm="12" :lg="8">
        <a-card title="到店人数统计" :hoverable="true" :bordered="false">
          <more-chart :chartData="moreData" class="chart-line" />
        </a-card>
      </a-col>
    </a-row> -->
  </div>
</template>

<script>
import {
  cardList,
  saleTitle,
  lineChart,
  shopRank,
  pieChart,
  hotChart,
  moreChart,
} from "./components";
import {
  getLineChartData,
  getRankShopData,
  getPieTypeData,
  getHotSearchData,
  getMoreData,
} from "@/services/dashboard";
import previewImage from "@/components/TopVUI/custom/previewImage";
export default {
  name: "index",
  components: {
    cardList,
    lineChart,
    saleTitle,
    shopRank,
    pieChart,
    hotChart,
    moreChart,
    previewImage,
  },
  data() {
    return {
      currentName: "销售额",
      currentKey: "sale",
      currentType: "day",
      lineData: {},
      rankData: [],
      pieData: [],
      hotData: [],
      moreData: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    simulateLinkClick() {
      let link = document.createElement("a");
      link.href = "https://www..com"; // 替换为实际链接地址
      link.target = "_blank"; // 替换为打开方式，比如在新标签页打开
      link.click();
    },
    getTitle(title, key) {
      if (title == this.currentName) {
        return;
      }
      this.currentName = title;
      this.currentKey = key;
      this.getLineData();
      this.getRankData();
    },

    getCurrent(type) {
      this.currentType = type;
      this.getData();
    },

    getData() {
      this.getLineData();
      this.getRankData();
      this.getPieData();
      this.getHotData();
      this.getMoreData();
    },

    async getLineData() {
      const { currentType: type, currentKey } = this;
      const { data } = await getLineChartData({ type, currentKey });
      this.lineData = data || [];
    },

    async getRankData() {
      const { currentType: type, currentKey } = this;
      const { data } = await getRankShopData({ type, currentKey });
      this.rankData = data || [];
    },

    async getPieData() {
      const { currentType: type } = this;
      const { data } = await getPieTypeData({ type });
      this.pieData = data || [];
    },

    async getHotData() {
      const { currentType: type } = this;
      const { data } = await getHotSearchData({ type });
      this.hotData = data || [];
    },

    async getMoreData() {
      const { currentType: type } = this;
      const { data } = await getMoreData({ type });
      this.moreData = data || [];
    },
  },
};
</script>
<style lang="scss" scoped>
.index-container {
  padding: 14px 0;
  .sale-card {
    background: rgba(255, 255, 255, 1);
    width: 100%;
    margin-top: 6px;
    .finger {
      cursor: pointer;
      position: absolute;
      display: flex;
      left: 575px;
      top: 240px;
      width: 240px;
      height: 50px;
      transition: top 0.3s ease;
      div {
        flex: 1;
        max-width: 65%;
        font-size: 11px;
        height: 35%;
        display: flex;
        align-items: center;
        color: red;
      }
      img {
        max-width: 25%;
        height: 35%;
        transform: rotate(-40deg);
      }
    }
    .finger:hover {
      top: 235px;
    }
    .sale-container {
      margin: 24px 0;
      height: 350px;
      box-sizing: border-box;
      padding: 0 24px;
      .shop-title {
        height: 50px;
        font-size: 1rem;
      }
    }
  }
  .sale-list {
    margin: 25px 0;
  }
  .chart-line {
    height: 300px;
    width: 100%;
  }
}
</style>
